<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const captcha1 = ref<number>();
const captcha2 = ref<number>();
const captcha3 = ref<number>();
const captcha4 = ref<number>();
const handleInput = (e: any) => {
    if (e.target.value.toString().length > 1) {
        e.target.value = e.target.value.toString().slice(0, 1);
    }


}
</script>

<template>
    <img id="back" src="@/assets/register/back.png" alt="" @click="router.go(-1)">
    <div id="statusText">验证码已发送至手机</div>
    <div id="phone">+86 138 3765 6480</div>
    <div class="captcha">
        <div id="tip">请输入验证码</div>
        <div id="nocaptcha">收不到验证码？</div>

    </div>
    <div class="nums">
        <input type="number" v-model="captcha1" @input="handleInput" class="num">
        <input type="number" v-model="captcha2" @input="handleInput" class="num">
        <input type="number" v-model="captcha3" @input="handleInput" class="num">
        <input type="number" v-model="captcha4" @input="handleInput" class="num">

    </div>
    <div id="other">还收不到验证码？请先确认手机是否安装了短信拦截软件或是否欠费停机。若均不是，请再尝试以下方式</div>
    <div class="reset">
        <img src="@/assets/captcha/mobile.png" alt="">
        <div id="resetText">重发验证码</div>
    </div>
    <div class="voice">
        <img src="@/assets/captcha/chat.png" alt="">
        <div id="voiceText">语音获取</div>
    </div>
</template>

<style scoped lang="less">
#status {
    width: 390px;
    height: 44px;
    background-color: rgba(248, 248, 248, 1);
}

#back {
    margin-left: 19px;
    margin-top: 20px;
    width: 20px;
    height: 20px;
}

#statusText {
    margin-left: 20px;
    margin-top: 40px;
    width: 216px;
    height: 33px;
    line-height: 33px;
    color: rgba(64, 64, 64, 1);
    font-size: 24px;
    text-align: left;
    font-family: PingFangSC-bold;
}

#phone {
    margin-left: 20px;
    margin-top: 10px;
    width: 170px;
    height: 25px;
    line-height: 25px;
    color: rgb(24, 144, 255);
    font-size: 18px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.captcha {
    margin-top: 45px;
    height: 20px;
    width: 390px;
    position: relative;

    #tip {
        position: absolute;
        left: 20px;
        width: 84px;
        height: 20px;
        line-height: 20px;
        color: rgb(16, 16, 16);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }

    #nocaptcha {
        position: absolute;
        right: 20px;
        width: 98px;
        height: 20px;
        line-height: 20px;
        color: rgba(24, 144, 255, 1);
        font-size: 14px;
        text-align: right;
        font-family: PingFangSC-regular;
    }
}

.nums {
    margin-top: 26px;

    .num {
        width: 67px;
        height: 60px;
        background-color: rgba(255, 255, 255, 1);
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid rgb(189, 189, 189) !important;
        border-radius: 5px;
        margin-left: 20px;
        text-align: center;
        font-size: larger;


    }
}

#other {
    margin-left: 19px;
    margin-top: 19px;
    width: 336px;
    height: 40px;
    line-height: 20px;
    color: rgba(191, 191, 191, 1);
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-regular;
}

.reset {
    height: 24px;
    width: 390px;
    margin-top: 72px;
    position: relative;

    img {
        position: absolute;
        left: 19px;
        width: 24px;
        height: 24px;
    }

    #resetText {
        position: absolute;
        left: 51px;
        height: 20px;
        line-height: 20px;
        color: rgba(24, 144, 255, 1);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }
}

.voice {
    height: 24px;
    width: 390px;
    margin-top:38px;
    position: relative;
    img {
        position: absolute;
        left: 19px;
        width: 24px;
        height: 24px;
    }

    #voiceText {
        position: absolute;
        left: 51px;
        height: 20px;
        line-height: 20px;
        color: rgba(24, 144, 255, 1);
        font-size: 14px;
        text-align: left;
        font-family: PingFangSC-regular;
    }
}
</style>